<template>
  <div class="header">
    <v-navigation-drawer v-model="drawer" fixed hide-overlay class="hidden-sm-and-up">
      <v-list dense>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>home</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar dark flat class="blue darken-3 py-2">
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
        <v-toolbar-side-icon @click.stop="drawer = !drawer" class="hidden-sm-and-up"></v-toolbar-side-icon>
        <v-icon class="mx-3">fab fa-vuejs</v-icon>
        <span>LABLOG</span>
      </v-toolbar-title>

      <v-text-field
        flat
        solo-inverted
        hide-details
        prepend-inner-icon="search"
        label="搜索"
        class="hidden-sm-and-down"
      ></v-text-field>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat :to="{name:'homepage'}">首页</v-btn>
        <v-menu offset-y>
          <v-btn slot="activator" flat>栏目</v-btn>
          <v-list>
            <v-list-tile
              v-for="(item, index) in categories"
              :key="index"
              @click="routerTo({name:'category',params:{id:item.id}})"
            >
              <v-list-tile-action>{{ item.name }}</v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-menu>
        <v-btn flat :to="{name:'archive'}">归档</v-btn>
        <v-btn flat :to="{name:'messages'}">留言</v-btn>
        <v-btn flat :to="{name:'page',params:{'id':1}}">关于</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data: () => ({
    drawer: null,
    categories: []
  }),
  methods: {
    init() {
      let _this = this
      request.get('/categories').then(res => {
        _this.categories = res.data.categories
      })
    },
    routerTo(router) {
      this.$router.push(router)
    }
  },
  created() {
    this.init()
  }
}
</script>

